<template>
  <div class="login_container">
    <!-- 屏幕宽度<=768，左侧占位内容不显示 -->
    <el-row>
      <el-col :span="10" :xs="0"></el-col>
      <el-col :span="14" :xs="24">
        <el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForms">
          <h1>医美后台管理系统</h1>
          <el-form-item prop="username">
            <el-input :prefix-icon="User" v-model="loginForm.username" size="large" placeholder="请输入用户名" clearable />
          </el-form-item>
          <el-form-item prop="password">
            <el-input :prefix-icon="Lock" v-model="loginForm.password" size="large" type="password" show-password
              placeholder="请输入密码" clearable />
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" class="login_btn" type="primary" round @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { User, Lock } from "@element-plus/icons-vue"
import { reactive, ref } from 'vue'
import useUserStore from '@/store/modules/user.ts'
import { useRouter, useRoute } from "vue-router"
import { ElMessage } from 'element-plus'
import {Encrypt} from '@/utils/crypto'

let loginForms = ref() //form表单实例
let $router = useRouter() // 路由器对象
let $route = useRoute() // 路由对象
let userStore = useUserStore()
let loading = ref(false) // 控制按钮加载效果
// let loginForm = reactive({ username: 'admin', password: 'jsjeda@123', platform:'医美后台管理系统' }) //账号密码表单数据
let loginForm = reactive({ username: '', password: '', platform:'医美后台管理系统'}) //账号密码表单数据

// 登录
const login = async () => {
  await loginForms.value.validate()
  loading.value = true //开始加载
  try {
    let params:any = {}
    Object.assign(params,loginForm)
    params.password = Encrypt(params.password,'','') //密码加密
    await userStore.userLogin(params)
    // 判断登录路由路径中是否有query参数，如果有就往querry参数跳转，没有就跳转首页
    let redirect: any = $route.query.redirect
    $router.push({ path: redirect || '/' })
    ElMessage.success('登录成功')
    loading.value = false //结束加载
  } catch (error) {
    loading.value = false
    ElMessage.error((error as Error).message)
  }
}

// 自定义校验规则
// @ts-ignore
const validatorUserName = (rule: any, value: any, callback: any) => {
  if (value.length >= 3) {
    callback()
  } else {
    callback(new Error('账号长度至少3位'))
  }
}
// @ts-ignore
const validatorPassword = (rule: any, value: any, callback: any) => {
  if (value.length >= 6) {
    callback()
  } else {
    callback(new Error('密码长度至少六位'))
  }
}

// 表单校验
const rules = {
  username: [{ trigger: 'change', validator: validatorUserName }],
  password: [{ trigger: 'change', validator: validatorPassword }],
}
</script>

<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.png') no-repeat;
  background-size: cover;

  .el-row {
    height: 100%;
  }

  .el-col-14 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .login_form {
    position: relative;
    background-size: cover;
    padding: 20px 50px;
    border: 1px solid #9891ff;
    box-shadow: #0003 0 2px 15px;
    background-color: #fff;
    border-radius: 8px;
    width: 500px;
    height: 450px;
    margin-right: 14vh;

    h1 {
      height: 130px;
      line-height: 130px;
      font-size: 34px;
      font-weight: 700;
      text-align: center;
      letter-spacing: 3px;
      animation: logoAnimation .3s ease;
      animation-delay: .3s;
      color: #6c63ff;
      font-family: Kaiti TC, Kaiti SC, DFKai-SB, serif;
    }

    .login_btn {
      width: 100%;
      letter-spacing: 2px;
      height: 40px;
      line-height: 40px;
      background-color: #6c63ff;
      font-size: 16px;
      border: none;
    }

    .login_btn:hover {
      border-color: #9891ff;
      background-color: #9891ff;
    }
  }
}
</style>